<template>
    <div class="export-dialog-view" v-loading="pageLoading">
        <div class="export-dialog">
            <div class="title">
                <p>{{ title }}</p>
                <i class="el-icon-close" @click="$emit('CloseExprotDiloag')"></i>
            </div>
            <div class="export-dialog-body">
                <div class="change-time">
                    <!-- <div class="item">
                        <span class="label larger-label">出力内容</span>
                    </div> -->
                    <div class="item">
                        <span class="label">装置：</span>
                        <span>{{ $store.state.plantName }}</span>
                    </div>
                    <div class="item">
                        <span class="label">内容：</span>
                        <span>{{ ExportDagaJson.AprIspFrom }}</span>
                        <span style="margin: 0 10px;">~</span>
                        <span>{{ ExportDagaJson.AprIspTo }}</span>
                        <span style="margin: 0 0 0 10px;">{{ ExportDagaJson.ApprovlComboxItem == 0 ? '周期見直し中' : '承認' }}</span>
                    </div>
                </div>
                <p class="tip">上記の内容で良いですか?</p>
                <div class="footer">
                    <el-button @click="$emit('CloseExprotDiloag')">
                        Cancel
                    </el-button>
                    <el-button type="primary" @click="onExportClick()">
                        OK
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import {
    ExportThickJudgResList
} from "@/api/api1";

export default {
    name: "ViewExportDialog",
    props: {
        title: {
            type: String,
            required: true
        },
        PltCode: {
            type: Number,
            required: true
        },
        // Code: {
        //     type: Number,
        //     required: true
        // },
        // CtgCode: {
        //     type: Number,
        //     required: true
        // },
        // LawCode: {
        //     type: Number,
        //     required: true
        // },
        PeriodFrom: {
            type: String,
            required: true
        },
        inspTo: {
            type: String,
            required: true
        },
        ApprovlComboxItem: {
            type: String,
            required: true
        },
        g_Type: {
            type: Number,
            required: true
        },
        ExportDagaJson: {
            type: Object,
            required: true
        },
    },
    data() {
        return {
            outTarget: 1,  //"出力対象" 
            excuType: 2,  //"出力内容" 
            SelecType: 1,  //"設備選択" 
            pageLoading: false,
        };
    },
    computed: {},
    watch: {},
    methods: {
        async onExportClick() {
            this.pageLoading = true;
            // let dataJson = {
            //     PltCode: this.PltCode,
            //     // Header: ["スプールNo.", "C.L.番号", "ラインクラス", "材質分類", "流体名称", "漏洩時の影響度", "定点が１か所以上あるか", "設置後12年以内に検査をしたか", "材質変更後12年以内に検査をしたか", "拡大検査完了をしたか", "代表点の周期が12年以内か", "代表点の余寿命が50年より大きいか", "代表点が１か所以上あるか"],
            //     // DataList: this.DataList
            //     ApprovlTxt: this.ApprovlComboxItem,
            //     AprIspFrom: this.PeriodFrom,
            //     AprIspTo: this.inspTo,
            // }
            let res = await ExportThickJudgResList(this.ExportDagaJson);
            this.pageLoading = false;
            if (res.data.code != 0) {
                this.$alert(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                    callback: action => { }
                });
                return;
            }

            window.open(res.data.data);

            this.$emit("CloseExprotDiloag");
        },
    },

    created() {
        console.log("Title:", this.title);
        console.log("PltCode:", this.PltCode);
        console.log("Code:", this.Code);
    }
};
</script>
<style lang="scss" scoped>
.export-dialog-view {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 6;
}

.export-dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 488px;
    padding-bottom: 24px;
    background: #ffffff;
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
        0px 9px 28px 0px rgba(0, 0, 0, 0.08), 0px 6px 16px -8px rgba(0, 0, 0, 0.15);

    .title {
        height: 42px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        font-size: 16px;

        p {
            font-weight: bold;
            color: rgba(0, 0, 0, 0.85);
        }

        .el-icon-close {
            cursor: pointer;
        }
    }

    .export-dialog-body {
        width: 100%;
        height: calc(100% - 42px);

        .change-time {
            margin: 0 24px;
            padding: 16px 0 0 0;
            border-bottom: 1px solid #f0f0f0;

            .item {
                display: flex;
                align-items: center;
                margin-bottom: 16px;

                .label {
                    width: 100px;
                    display: flex;
                    align-items: center;
                    font-weight: bold;
                    font-size: 14px;
                    color: rgba(0, 0, 0, 0.85);

                    &.larger-label {
                        font-size: 18px;
                    }
                }

                .radio-option {
                    flex: 1;
                    margin-right: 32px;
                    display: flex;
                    align-items: center;

                    ::v-deep .el-radio__input.is-checked+.el-radio__label {
                        //font-weight: bold;
                    }
                }
            }
        }

        .tip {
            margin: 16px 24px 24px 24px;
            font-weight: bold;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.85);
        }

        .footer {
            margin: 0 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            button {
                width: 82px !important;
                height: 32px;
                // background: #ffffff;
                // border: 1px solid #d9d9d9;
                // cursor: pointer;
                line-height: 0;
            }

            button:nth-child(2) {
                margin-left: 16px;
                // color: #ffffff;
                // background: #106ebe;
            }
        }
    }
}

.w-50 {
    width: 50px;
    display: inline-block
}

.orange {
    ::v-deep .el-input__inner {
        background-color: #FEDDB1;
    }
}

.pl20 {
    ::v-deep .el-input__inner {
        width: 120px;
        height: 24px;
        padding-right: 5px;
        padding-left: 25px !important;
    }
}
</style>